<div #table class="thread-table table-container">

  <button mat-icon-button
          (click)="toggleFiltering(filterInput)"
          aria-label="Invert Filter"
          matTooltip="Invert Filter">
    <mat-icon class="search-icon"
              color="accent"
              [class.inverted]="hideResults"
              [class.active]="filter.value.length">
      search
    </mat-icon>
  </button>
  <mat-form-field class="thread-filter">
    <input #filterInput class="filter-input" matInput
           [ngModel]="filter.value"
           (ngModelChange)="filter.next($event)"
           placeholder="Filter PID | Command">
  </mat-form-field>
  <button *ngIf="filter.value.length"
          mat-icon-button
          (click)="clearFilter(filterInput)"
          aria-label="Clear Filter"
          matTooltip="Clear Filter">
    <mat-icon color="accent">
      highlight_off
    </mat-icon>
  </button>
  <button *ngIf="filter.value.length"
          mat-icon-button
          (click)="newFilterLayer()"
          aria-label="New Layer"
          matTooltip="New Layer">
    <mat-icon color="accent" >
      library_add
    </mat-icon>
  </button>

  <div class="thread-table-container">
    <table mat-table
           [class.embedded-table]="embedded"
           [dataSource]="dataSource"
           matSort (matSortChange)="this.sort.next($event)"
           [matSortActive]="sort.value.active"
           [matSortDirection]="sort.value.direction"
           multiTemplateDataRows
           (mouseout)="previewRow()">

      <!-- Checkbox Column -->
      <ng-container matColumnDef="selected">
        <th mat-header-cell
            *matHeaderCellDef
            mat-sort-header
            matTooltip="Sort by Selected">
          <mat-icon>
            layers
          </mat-icon>
        </th>
        <td mat-cell *matCellDef="let row">
          <layer-toggle (click)="$event.stopPropagation()"
                        (mouseenter)="previewRow(row)"
                        [color]="colorService.getColorFor(row.label)"
                        [toggledOn]="selection.isSelected(row.label)"
                        (toggledOnChange)="toggleSelection(row)"></layer-toggle>
        </td>
      </ng-container>

      <!-- PID Column -->
      <ng-container matColumnDef="pid">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>PID</th>
        <td mat-cell *matCellDef="let thread">{{thread.pid}}</td>
      </ng-container>

      <!-- Command Column -->
      <ng-container matColumnDef="command">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Command</th>
        <td mat-cell *matCellDef="let thread">{{thread.command}}</td>
      </ng-container>

      <!-- Wakeups Column -->
      <ng-container matColumnDef="wakeups">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{aggregateWakeups}} <br> Wakeups
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">{{thread.wakeups}}</td>
      </ng-container>

      <!-- Migrations Column -->
      <ng-container matColumnDef="migrations">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{aggregateMigrations}} <br> Migrations
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">{{thread.migrations}}</td>
      </ng-container>

      <!-- Wait Time Column -->
      <ng-container matColumnDef="waittime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{formatTime(aggregateWaitTime)}} <br> Waiting
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">
          {{formatTime(thread.waittime)}}
        </td>
      </ng-container>

      <!-- Run Time Column -->
      <ng-container matColumnDef="runtime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{formatTime(aggregateRunTime)}} <br> Running
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">
          {{formatTime(thread.runtime)}}
        </td>
      </ng-container>

      <!-- Sleep Time Column -->
      <ng-container matColumnDef="sleeptime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{formatTime(aggregateSleepTime)}} <br> Sleeping
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">
          {{formatTime(thread.sleeptime)}}
        </td>
      </ng-container>

      <!-- Unknown Time Column -->
      <ng-container matColumnDef="unknowntime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{formatTime(aggregateUnknownTime)}} <br> Unknown
        </th>
        <td mat-cell class="metric-cell" *matCellDef="let thread">
          {{formatTime(thread.unknowntime)}}
        </td>
      </ng-container>

      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
      <ng-container matColumnDef="expandedDetail">

        <td mat-cell *matCellDef="let thread" [attr.colspan]="displayedColumns.length">
          <!-- TODO(sainsley): Move out of template and insert as needed to avoid repeat use -->
          <div class="thread-detail" *ngIf="!embedded"
               [@detailExpand]="thread.label === expandedThread.value ? 'expanded' : 'collapsed'">
            <div *ngIf="thread.label === expandedThread.value">
              <div class="expanded-controls">
                <mat-form-field>
                  <input matInput
                         matTooltip="Allowed units are nanoseconds, microseconds, milliseconds, seconds, minutes, and hours. The events table will be sorted by start time whenever the jump time is changed."
                         isDuration
                         [errorStateMatcher]="jumpToTimeMatcher"
                         placeholder="Jump to time (e.g. '30 ms')"
                         [ngModel]="jumpToTimeInput.value"
                         (ngModelChange)="jumpToTimeInput.next($event)">
                  <mat-error>
                    Invalid time format
                  </mat-error>
                </mat-form-field>
              </div>
              <div class="expanded-details">
                <mat-tab-group>
                  <mat-tab label="Raw Events">
                    <event-table class="detail-table"
                                 [data]="expandedFtraceIntervals"
                                 [preview]="preview"
                                 [layers]="layers"
                                 [jumpToTimeNs]="thread.label === expandedThread.value && jumpToTimeNs"
                                 [dataPending]="thread.eventsPending">
                    </event-table>
                  </mat-tab>
                  <mat-tab label="Intervals">
                    <interval-table class="detail-table"
                                    [data]="expandedThreadIntervals"
                                    [preview]="preview"
                                    [layers]="layers"
                                    [jumpToTimeNs]="thread.label === expandedThread.value && jumpToTimeNs"
                                    [dataPending]="thread.intervalsPending">
                    </interval-table>
                  </mat-tab>
                  <mat-tab label="Antagonists">
                    <antagonist-table class="detail-table"
                                      [data]="expandedThreadAntagonists"
                                      [preview]="preview"
                                      [layers]="layers"
                                      [jumpToTimeNs]="thread.label === expandedThread.value && jumpToTimeNs"
                                      [dataPending]="thread.antagonistsPending">
                    </antagonist-table>
                  </mat-tab>
                </mat-tab-group>
              </div>
            </div>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" (mouseenter)="previewRow()">
      </tr>
      <tr mat-row *matRowDef="let thread; columns: displayedColumns;"
               class="selectable-row thread-row"
               (mouseenter)="previewRow(thread)"
               (mouseout)="$event.stopPropagation();"
               [class.expanded-row]="expandedThread.value === thread.label"
               (click)="!isTextSelected() && expandThread(thread)">
      </tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row">
      </tr>
    </table>
  </div>
  <div *ngIf="data.value.length == 0" class="spinner-container">
    <mat-progress-spinner *ngIf="dataPending; else noData"
      color="primary"
      mode="indeterminate">
    </mat-progress-spinner>
    <ng-template #noData>
      <i>No data to display</i>
    </ng-template>
  </div>
  <mat-paginator [pageSize]="pageSize" showFirstLastButtons>
  </mat-paginator>
</div>
